<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" class="AccountHandles">
    <el-tab-pane :label="$t('stock.sh_infos.56hzfoysm400')" name="first">
      <!-- 今日额度 -->
      <h3>
        {{
          AGActive == 1
            ? $t("stock.sh_infos.56hzfoysmjo0")
            : $t("stock.sh_echarts.56hzfd0st3g0")
        }}
      </h3>
      <!-- 资金净流向 -->
      <p class="f-cb">
        {{ $t("stock.sh_infos.56hzfoysmns0") }}
        <span
          :class="
            quotaTop > 0
              ? 'red'
              : quotaTop < 0
              ? 'green'
              : ''
          "
          >{{
            quotaTop > 0
              ? "+"
              :""
          }}{{ quotaTop | changeNum(te) }}</span
        >
      </p>
      <!-- 额度 -->
      <p class="f-cb">
        {{ $t("stock.sh_infos.56hzfoysmr00") }}
        <span class="qu_value">{{ trendTop | changeNum(te) }}</span>
      </p>
      <p class="f-cb">
        {{ $t("stock.sh_infos.56hzfoysmu00") }}
        <span class="qu_value">{{ (usedTop * 100).toFixed(2) }}%</span>
      </p>
      <h3>
        {{
          AGActive == 1
            ? $t("stock.sh_infos.56hzfoysmx80")
            : $t("stock.sh_echarts.56hzfd0st700")
        }}
      </h3>
      <!-- 资金净流向 -->
      <p class="f-cb">
        {{ $t("stock.sh_infos.56hzfoysmns0") }}
        <span
          :class="
            quotaBottm >0
              ? 'red'
              : quotaBottm <0
              ? 'green'
              : ''
          "
          >{{
            quotaBottm >0
              ? "+"
              :""
          }}{{ quotaBottm | changeNum(te) }}</span
        >
      </p>
      <p class="f-cb">
        {{ $t("stock.sh_infos.56hzfoysmr00") }}
        <span class="qu_value">{{ trendBottom | changeNum(te) }}</span>
      </p>
      <p class="f-cb">
        {{ $t("stock.sh_infos.56hzfoysmu00") }}
        <span class="qu_value">{{ (usedBottom * 100).toFixed(2) }}%</span>
      </p>
    </el-tab-pane>
    <el-tab-pane name="second">
      <span slot="label"
        >{{ $t("stock.sh_infos.56hzfoysmzw0")
        }}<el-tooltip placement="bottom-end">
          <div slot="content">
            {{ $t('stock.sh_infos.56m00iyqqs40') }}<br />
            {{ $t('stock.sh_infos.56m00iyqrio0') }}<br />
            {{ $t('stock.sh_infos.56m00iyvsio0') }}
          </div>
          <img
            class="tip_icon"
            src="@/assets/img/icon_bbxxh.png"
            alt=""
          /> </el-tooltip
      ></span>
      <!-- 资金流向趋势 -->
      <div class="one">
        <p class="f-cb">
          <span class="date"
            >{{ $t("stock.sh_infos.56hzfoysn2o0") }}
            {{ updateTime }}</span
          >
          <span class="unit">{{ $t("stock.sh_infos.56hzfoysn740") }}</span>
        </p>
        <h3>
          {{
            AGActive == 1
              ? $t("stock.sh_infos.56hzfoysmjo0")
              : $t("stock.sh_echarts.56hzfd0st3g0")
          }}{{ $t('stock.sh_infos.56m00iyqry40') }}
        </h3>
        <p class="f-cb">
          {{ $t("stock.sh_infos.56hzfoysn9w0") }}
          <span
            :class="
              flowTop.d5 > 0 ? 'red' : flowTop.d5 < 0 ? 'green' : ''
            "
            >{{ flowTop.d5 > 0 ? "+" : ""
            }}{{ flowTop.d5 | changeNum(te) }}</span
          >
        </p>
        <p class="f-cb">
          {{ $t("stock.sh_infos.56hzfoysnco0") }}
          <span
            :class="
              flowTop.d20 > 0 ? 'red' : flowTop.d20 < 0 ? 'green' : ''
            "
            >{{ flowTop.d5 > 0 ? "+" : ""
            }}{{ flowTop.d20 | changeNum(te) }}</span
          >
        </p>
        <p class="f-cb">
          {{ $t("stock.sh_infos.56hzfoysnfo0") }}
          <span
            :class="
              flowTop.d60 > 0 ? 'red' : flowTop.d60 < 0 ? 'green' : ''
            "
            >{{ flowTop.d60 > 0 ? "+" : ""
            }}{{ flowTop.d60 | changeNum(te) }}</span
          >
        </p>
        <h3>
          {{ AGActive == 1 ? $t("stock.sh_infos.56hzfoysmx80") : $t("shStock.sh_Market.57klq52ashh0")
          }}{{ $t('stock.sh_infos.56m00iyqry40') }}
        </h3>
        <p class="f-cb">
          {{ $t("stock.sh_infos.56hzfoysn9w0") }}
          <span
            :class="
              flowBottom.d5 > 0 ? 'red' : flowBottom.d5 < 0 ? 'green' : ''
            "
            >{{ flowBottom.d5 > 0 ? "+" : ""
            }}{{ flowBottom.d5 | changeNum(te) }}</span
          >
        </p>
        <p class="f-cb">
          {{ $t("stock.sh_infos.56hzfoysnco0") }}
          <span
            :class="
              flowBottom.d20 > 0 ? 'red' : flowBottom.d20 < 0 ? 'green' : ''
            "
            >{{ flowBottom.d20 > 0 ? "+" : ""
            }}{{ flowBottom.d20 | changeNum(te) }}</span
          >
        </p>
        <p class="f-cb">
          {{ $t("stock.sh_infos.56hzfoysnfo0") }}
          <span
            :class="
              flowBottom.d60 > 0 ? 'red' : flowBottom.d60 < 0 ? 'green' : ''
            "
            >{{ flowBottom.d60 > 0 ? "+" : ""
            }}{{ flowBottom.d60 | changeNum(te) }}</span
          >
        </p>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {get_capitalLine} from '@/assets/js/API/info.js';
export default {
  props: ["AGActive", "AHConnectLists"],
  components: {},
  data() {
    return {
      activeName: "first",
      AHConnectList: [],
      quotaTop: null,
      quotaBottm: null,
      trendTop: null,
      flowTop: {
        d5: 0,
        d20: 0,
        d60: 0,
      }, // 资金流向上数据
      flowBottom: {
        d5: 0,
        d20: 0,
        d60: 0,
      }, // 资金流向下数据
      trendBottom: null,
      usedTop: 0, // 已使用上
      usedBottom: 0, // 已使用下
      updateTime: "", // 更新时间
    };
  },
  mounted() {
    //this.getAHConnect();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getAHConnect() {
      var _this = this;
        get_capitalLine().then(function (res) {
          if (res.code == 1) {
            _this.AHConnectList = res.data.capital;
            _this.AGActiveChange(_this.AGActive, res.data.capital);
          } else {
            _this.$message({
              message: response.data.msg,
              type: "warning",
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    AGActiveChange(AGActive, list) {
      //1:A股通 (北向) 2:港股通 (南向) hk2sh:沪股通,sh2hk:港股通沪
      // hk2sz: 深股通, sz2hk: 港股通深
      if (AGActive == 1) {
        this.quotaTop = list.amount.hk2sh.netIn;
        this.trendTop = list.amount.hk2sh.amtRemain;
        this.usedTop = list.amount.hk2sh.netIn / (520 * (10**8));
        this.quotaBottm = list.amount.hk2sz.netIn;
        this.usedBottom = list.amount.hk2sz.netIn / (520 * (10**8));
        this.trendBottom = list.amount.hk2sz.amtRemain;
        this.updateTime = list.flow.hk2cn.updateTime;
        this.flowTop = list.flow.hk2cn.total.hk2sh;
        this.flowBottom = list.flow.hk2cn.total.hk2sz;
      } else {
        this.quotaTop = list.amount.sh2hk.netIn;
        this.trendTop = list.amount.sh2hk.amtRemain;
        this.usedTop = list.amount.sh2hk.netIn / (420 * (10**8));
        this.quotaBottm = list.amount.sz2hk.netIn;
        this.trendBottom = list.amount.sz2hk.amtRemain;
        this.usedBottom = list.amount.sz2hk.netIn / (420 * (10**8));
        this.updateTime = list.flow.cn2hk.updateTime;
        this.flowTop = list.flow.cn2hk.total.sh2hk;
        this.flowBottom = list.flow.cn2hk.total.sz2hk;
      }
    },
  },
  watch: {
    AGActive(val) {
      if (val != "" && JSON.stringify(this.AHConnectList) != "[]") {
        this.AGActiveChange(val, this.AHConnectList);
      }
    },
    AHConnectLists(val) {
      if (val != "") {
        this.AHConnectList = val;
        this.AGActiveChange(this.AGActive, val);
      }
    },
  },
};
</script>

<style lang="less">
.AccountHandles {
  width: 100%;
  height: calc(100% - 31px);
  background: @sideColor;
  .el-tabs__header {
    margin-bottom: 0;
    .el-tabs__nav-wrap.is-scrollable {
      padding: 0;
    }
    .tip_icon {
      width: 16px;
      height: 16px;
    }
    .el-tabs__nav {
      width: 100%;
      text-align: center;
      padding-top: 10px;
    }
    .el-tabs__item {
      font-size: 13px;
      color: @fbSix;
      padding: 0 10px;
      line-height: 32px;
      height: 32px;
    }
    .el-tabs__item.is-top:nth-child(2) {
      padding-left: 0;
    }
    .el-tabs__item.is-active {
      color: @hoverColor;
    }
    .el-tabs__active-bar {
      display: none;
      background-color: @hoverColor;
    }
  }
  .el-tabs__content {
    height: calc(100% - 43px);
    overflow: auto;
    padding: 0 10px;
    h3 {
      font-size: 12px;
      color: @fff;
      line-height: 28px;
    }
    h2 {
      font-size: 28px !important;
      color: @fff;
      padding: 0 !important;
      line-height: 40px;
    }
    p {
      font-size: 12px;
      color: @fbSix;
      line-height: 26px;
      span {
        float: right;
      }
      .qu_value {
        color: @fff;
      }
    }
    .one {
      p {
        line-height: 30px;
        .date {
          float: left;
        }
        .unit {
          float: right;
        }
      }
    }
  }
  .el-tabs__nav-wrap::after {
    height: 0px;
    display: none;
    background: @LightBorderLine;
  }
}
.el-tooltip__popper.is-dark {
  background: @LightBorderLine;
}
</style>